<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IP 获取地址工具</title>
    <script src="plugins/vue/vue.min.js"></script>
    <script src="plugins/element-ui/2.15.14/index.min.js"></script>
    <script src="util/xj-ajax.js"></script>
    <script src="plugins/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="plugins/element-ui/2.15.14/index.min.css"/>
</head>
<body>
<div id="app" v-cloak>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>接口信息</span>
        </div>
        <div class="text item">接口地址: {{url}}</div>
        <div class="text item">请求方式: POST</div>
        <div class="text item">请求参数: ip</div>
    </el-card>
    <div style="margin-top: 20px"></div>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>在线请求</span>
        </div>
        <div class="demo-input-suffix" style="margin-top: 10px">
            输入IP:
            <el-input style="width: 200px" v-model="ip" type="text" size="mini" placeholder="请输入 ip 地址"></el-input>
            <el-button type="warning" size="mini" @click="getAddress()">查询</el-button>
        </div>
        <pre>
            {{address}}
        </pre>

    </el-card>
</div>


</body>
<script>
    var vm = new Vue({
        // 绑定 id="app" 的元素
        el: "#app",
        data: {
            path: "",
            url: "",
            getIpUrl: "",
            ip: "",
            address: null,
        },
        created() {
            this.path = location.href.replace("/index.html", "")
            this.url = this.path + "/api/getAddressByIp";
            this.getIpUrl = this.path + "/api/getIp";
            this.getIp();
            this.getAddress();
        },
        methods: {
            getAddress() {
                let res = Ajax.post(this.url + "?ip=" + this.ip);
                this.address = res
            },
            getIp() {
                let res = Ajax.post(this.getIpUrl);
                this.ip = res.data;
            }
        }
    })
</script>
</html>